Angular学习笔记($filter)

AngularJS 里面的过滤器就是一个函数，它的作用就是将输入的数据经过格式化后再输出给user

Angular内置指令

在HTML的模板中使用 | 符号来调用过滤器。

//大写
{{ 'hello' | uppercase }}   // HELLO

//将一个json或js的对象转化成字符串
{{ {name: 'xl', age: 23} | json }}  // {'name': 'xl', 'age': 23}

//将数字格式转化成文本
{{ 123456789 | number }}  // 123,456,789

//limitTo过滤器会根据传入的数字来返回新的数组或者字符串
{{'This is sunny day' | limitTo: 4}}  // 'This'
{{['This', 'is', 'sunny', 'day'] | limitTo: 1 }}   // ['This']

//date格式化日期
var time = (new Date()).valueOf();
{{ time | date }}   // Oct 3, 2015

在Controller里面调用内置过滤器$filter

    var app = angular.module('app', []);
    app.controller('MainContainer', function($scope, $filter){
        var time = (new Date()).valueOf();
        $filter(date)(time, 'yyyy-MM-dd');
        var string = 'Hello world';
        $filter('uppercase')(string);
    })
    
    //$filter(date)(time, 'yyyy-MM-dd') 第一个括号里面的参数代表调用哪个内置过滤器，第二个括号里面的参数代表向过滤器中传入的参数，第一个是参数是需要被格式化的数据，第二个参数代表格式。  

Angular自定义指令

    var app = angular.module('app', []);
    app.controller('mainCtrl', function($scope){
        
    });
    app.filter('slice', function(){
        return function(input){
            return input.slice(2);
        }
    });
    
    
    index.html 
    {{ 'Hello' | slice }}  // 'llo'

向指令里传递参数

使用 : 来隔开每个参数

    var app = angular.module('app', []);
    app.controller('mainCtrl', function(){
    
    });
    
    app.filter('addString', function(){
        return function(input, stringOne, stringTwo){
            return input + ' ' + stringOne + ' ' + stringTwo;
        }
    })
    
    index.html
    
    {{ 'Hello' | addString:'world':'!!!' }} 
    // 'Hello world !!!'

过滤器优化

位于视图中的每个过滤器至少被调用2次，这是过滤器的本质。因此越是保持这些函数轻量及对它们进行优化，应用程序就会更快。

《Angular权威教程》里面对过滤器的优化提出了2种途径

一. 避免在视图中使用过滤器，尽可能在过滤逻辑移至控制器或服务中
二. 缓存过滤器的执行结果

参考资料：
Angular过滤器
Angular过滤器
AngularJS权威指南 1.2.x